// 已盘点客户列表
import * as React from 'react';
import { useEffect, useState } from 'react';
import apis from '@/apis/Report';
import { Button, Col, Row, Spin, Table } from 'antd';
import './index.scss';
import { http } from '@/lib';
import moment from 'moment';
import 'moment/locale/zh-cn.js';

moment.locale('zh-cn');
const CheckedCustomerList = (props) => {
  // const spanUI = {color: '#000', fontWeight: 'bolder'} as any;
  const spanUI = {} as any;
  // const  state  = props.location?.state || JSON.parse(sessionStorage.getItem('stateForCheckedCustomerList')) ;
  // table的loading
  const [loading, setLoading] = useState(true);
  let pathnameStr = props.history.location.pathname.split('/');

  let belongAreaCode = pathnameStr[pathnameStr.length - 1].split('&')[0];

  // let hasNumberPlateList = pathnameStr[pathnameStr.length - 1].split('&')[1].split('=')[1];
  useEffect(() => {
    // if (!sessionStorage.getItem('inventoryTime') || sessionStorage.getItem('inventoryTime') === 'undefined'  || sessionStorage.getItem('inventoryTime') === 'null') {
    //     sessionStorage.setItem("inventoryTime", props.location?.state?.record?.inventoryTime);
    // }
    if (!sessionStorage.getItem('hasNumberPlateList') || sessionStorage.getItem('hasNumberPlateList') === 'undefined' || sessionStorage.getItem('hasNumberPlateList') === 'null') {
      sessionStorage.setItem('hasNumberPlateList', JSON.stringify(props.location.state?.record?.inventoryCustomerBeanListVo?.hasNumberPlateList));
      // let inventoryCycle = props.location.state?.record?.inventoryTime.split('-');
      let inventoryCycle = props.location.state?.record?.inventoryTime;
      // inventoryCycle[1] = parseInt(inventoryCycle[1]) + '月';
      // inventoryCycle[0] = inventoryCycle[0] + '年';
      // inventoryCycle = inventoryCycle.join('');
      sessionStorage.setItem('inventoryCycle', JSON.stringify(inventoryCycle));
    }
    // return () => {
    //     sessionStorage.removeItem('hasNumberPlateList');
    // }
  }, []);
  // 已盘点客户列表列标题
  const columns = [
    {
      title: <span style={spanUI}>序号</span>,
      key: 'number',
      render: (text, record, index) => {
        return <span>{index + 1}</span>;
      },
      align: 'center',
    },
    {
      title: <span style={spanUI}>客户编码</span>,
      key: 'dealerCode',
      dataIndex: 'dealerCode',
      align: 'center',
    },
    {
      title: <span style={spanUI}>客户名称</span>,
      key: 'dealerName',
      dataIndex: 'dealerName',
      align: 'center',
    },
    {
      title: <span style={spanUI}>客户类型</span>,
      key: 'dealerType',
      align: 'center',
      render: (text, record, index) => {
        return <span>经销商</span>;
      },
    },
    {
      title: <span style={spanUI}>销售组织</span>,
      key: 'brandName',
      dataIndex: 'brandName',
      align: 'center',
    },
    {
      title: <span style={spanUI}>所属管理区域</span>,
      key: 'belongAreaName',
      dataIndex: 'belongAreaName',
      align: 'center',
    },
    {
      title: <span style={spanUI}>盘点周期</span>,
      key: 'description',
      dataIndex: 'description',
      align: 'center',
    },
    {
      title: <span style={spanUI}>最后盘点时间</span>,
      key: 'createTime',
      dataIndex: 'createTime',
      align: 'center',
    },
    {
      title: <span style={spanUI}>最后操作人</span>,
      key: 'createName',
      dataIndex: 'createName',
      align: 'center',
    },
    {
      title: <span style={spanUI}>操作</span>,
      key: 'action',
      render: (text, record) => {
        return (
          <span
            style={{ color: 'blue', cursor: 'pointer' }}
            onClick={() => {
              props.history.push({ pathname: `/report/stockcustomercountreport/checkedcustomerlist/detail/${record.id}`, state: record });
            }}>
            查看详情
          </span>
        );
      },
      align: 'center',
    },
  ];

  // table的pagination
  const [pagination, setPagination] = useState({
    page: 1,
    current: 1,
    pageSize: 10,
    showSizeChanger: true,
    showQuickJumper: true,
    pageSizeOptions: ['10', '20', '40', '60', '100', '150', '200'],
    total: 0,
    showTotal: (total, range) => `当前${range[0]}-${range[1]},共${total}项`,
  });
  // table的数据源
  const [dataSource, setDataSource] = useState([]);
  // 进入界面获取信息
  useEffect(() => {
    setLoading(true);
    let hasNumberPlateList = props.location.state?.record?.inventoryCustomerBeanListVo?.hasNumberPlateList || JSON.parse(sessionStorage.getItem('hasNumberPlateList'));
    let inventoryCycle = JSON.parse(sessionStorage.getItem('inventoryCycle'));
    let brandCode = JSON.parse(sessionStorage.getItem('stateForCheckedCustomerList')).brandCode;
    // 请求数据，先从url中获取brandcode
    http
      .post(apis.InOrderToInventoryList, {
        page: pagination.page,
        size: pagination.pageSize,
        belongAreaCode: belongAreaCode,
        hasNumberPlateList: hasNumberPlateList,
        inventoryCycle: inventoryCycle,
        brandCode: brandCode,
      })
      .then((res) => {
        let data = res.data.content;
        data.forEach((item, index) => {
          if (item.createTime) {
            item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm:ss');
          }
          if (item.inventoryEndTime) {
            item.inventoryEndTime = item.inventoryEndTime.split('T').join(' ');
          }
          item.key = index;
        });
        setDataSource(res.data.content);
        setPagination({ ...pagination, total: res.data.totalElements });
        setLoading(false);
      })
      .catch((err) => {
        setLoading(false);
      });
  }, [pagination.page, pagination.pageSize]);

  const returnBack = () => {
    // 返回上级的方法
    sessionStorage.removeItem('hasNumberPlateList');
    sessionStorage.removeItem('inventoryCycle');
    // sessionStorage.removeItem('inventoryTime');
    props.history.go(-1);
  };
  return (
    <React.Fragment>
      <Row justify="space-around" align="bottom" gutter={24} style={{ paddingTop: '10px' }}>
        <Col offset={0} span={22}>
          <span className="checkedCustomerList-title">已盘点客户列表</span>
        </Col>
        <Col offset={0} span={2}>
          <Button
            onClick={() => {
              returnBack();
            }}
            type="primary">
            返回
          </Button>
        </Col>
      </Row>
      {/* 渲染的table */}
      <Spin spinning={loading}>
        <Table
          columns={columns as any}
          pagination={pagination}
          onChange={(pageOptions) => {
            setPagination({
              ...pagination,
              pageSize: pageOptions.pageSize,
              current: pageOptions.current,
              page: pageOptions.current,
            });
          }}
          dataSource={dataSource}
        />
      </Spin>
    </React.Fragment>
  );
};

export default CheckedCustomerList;
